<template>
  <div class="d-row">
    <div class="d-form-group d-form-group-flex d-col-xs-6">
      <div class="d-form-label d-text-right">
        <label class="label-text">名称</label>
      </div>
      <div class="d-form-el">
        <input v-model="state.name" class="d-form-input" type="text" />
      </div>
    </div>
    <div class="d-form-group d-form-group-flex d-col-xs-6">
      <div class="d-form-label d-text-right">
        <label class="label-text">排序</label>
      </div>
      <div class="d-form-el d-form-el-vertical">
        <input v-model="state.order" class="d-form-input" type="text" placeholder="数值越大越靠前" />
      </div>
    </div>
    <div class="d-form-group d-form-group-flex d-col-xs-6">
      <div class="d-form-label d-text-right">
        <label class="label-text">周期执行</label>
      </div>
      <div class="d-form-el">
        <Switcher v-model="state.isCycle" />
      </div>
    </div>
    <div class="d-form-group d-form-group-flex d-col-xs-6">
      <div class="d-form-label d-text-right">
        <label class="label-text">周期时间(秒)</label>
      </div>
      <div class="d-form-el d-form-el-vertical">
        <input v-model="state.cycleTime" class="d-form-input" type="text" />
      </div>
    </div>
    <div class="d-form-group d-form-group-flex d-col-xs-6">
      <div class="d-form-label d-text-right">
        <label class="label-text">排除时间段</label>
      </div>
      <div class="d-form-el d-form-el-vertical">
        <input v-model="state.exceptPeriod" class="d-form-input" type="text" placeholder="如：" />
      </div>
    </div>
  </div>
</template>

<script>
import { PanerForm } from '@daelui/vdog/dist/pages.js'
import { Switcher } from '@daelui/vdog/dist/components.js'

export default {
  components: {
    PanerForm,
    Switcher
  },

  props: {
    // 流程对象
    data: {
      type: Object,
      default () {
        return {
          config: {}
        }
      }
    }
  },

  data () {
    return {
      state: {
        name: '',
        order: '',
        isCycle: false,
        cycleTime: 300
      }
    }
  },

  methods: {
    getValue () {
      return this.state
    },
    reload () {
      this.state = Object.assign({
        name: '',
        order: 1,
        isCycle: false,
        cycleTime: 300
      }, this.data.config || {})
    }
  },

  mounted () {
    this.reload()
  }
}
</script>

<style lang="less" scoped>
.d-form-label {
  width: 120px;
}
.d-form-textarea {
  min-height: 120px;
}
</style>
